<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-title" content="大屏数据展示后台管理系统"/>
    <title>大屏数据展示后台管理系统</title>
    <meta name="description" content="大屏数据展示后台管理系统">
    <meta th:replace="base/meta" />
    <link rel="stylesheet" href="static/lib/datatables/amazeui.datatables.min.css">
</head>

<body>
<header th:replace="base/head::header"></header>

<div class="tpl-page-container tpl-page-header-fixed">
    <div th:replace="base/head::menu('user')"></div>
    <!--内容-->
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            用户数据管理
        </div>
        <ol class="am-breadcrumb">
            <li><a href="index" class="am-icon-home">首页</a></li>
            <li><a href="#">数据大屏</a></li>
            <li class="am-active">用户数据管理</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-server"></span> 用户数据管理
                </div>
            </div>

            <table class="am-table am-table-striped am-table-hover table-main"  id="table">
                <thead>
                <tr>
                    <th><input id="tr-select-all" type="checkbox" class="tr-checkbox"></th>
                    <th>登录名</th>
                    <th>姓名</th>
                    <th>用户角色类型</th>
                    <th>邮箱</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>


            <!-- 新增数据按钮 -->
            <div class="am-modal am-modal-no-btn" tabindex="-1" id="insertElement">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">用户处理
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="emptyData()">&times;</a>
                    </div>

                    <div class="tpl-block">
                        <div class="am-g">
                            <div class="tpl-form-body tpl-form-line">
                                <form class="am-form tpl-form-line-form">

                                    <div class="am-form-group">
                                        <label for="login_name" class="am-u-sm-3 am-form-label">登录名</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="login_name"
                                                   placeholder="请输入登录名">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="user_name" class="am-u-sm-3 am-form-label">姓名</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="user_name"
                                                   placeholder="请输入姓名">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="user_type" class="am-u-sm-3 am-form-label">角色类型</label>
                                        <div class="am-u-sm-9">
                                            <select data-selected id="user_type">
                                                <option selected="" value="">请选择角色类型</option>
                                                <option value="00">管理员</option>
                                                <option value="01">测试</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="email" class="am-u-sm-3 am-form-label">邮箱</label>
                                        <div class="am-u-sm-9">
                                                <input type="email" class="tpl-form-input" id="email" onblur="checkEmail()"
                                                   placeholder="请输入邮箱">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="phone_number" class="am-u-sm-3 am-form-label">手机号</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="phone_number" onblur="checkPhone()"
                                                   placeholder="请输入手机号">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="sex" class="am-u-sm-3 am-form-label">性别</label>
                                        <div class="am-u-sm-9">
                                            <select data-selected id="sex">
                                                <option selected="" value="">请选择性别</option>
                                                <option value="1">女</option>
                                                <option value="0">男</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="password" class="am-u-sm-3 am-form-label">密码</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="password"
                                                   placeholder="请输入密码">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="status" class="am-u-sm-3 am-form-label">状态</label>
                                        <div class="am-u-sm-9">
                                            <select data-selected id="status">
                                                <option selected="" value="">请选择状态</option>
                                                <option value="1">正常</option>
                                                <option value="0">删除</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="remark" class="am-u-sm-3 am-form-label">备注</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="remark"
                                                   placeholder="请输入备注">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button type="button" class="am-btn am-btn-default" data-am-modal-close onclick="emptyData()"><span class="am-icon-close"></span>关闭</button>
                                            <button type="button"
                                                    class="am-btn am-btn-default am-btn-secondary" onclick="insertUserData()"><span class="am-icon-save"></span> 保存
                                            </button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

</div>

<div th:replace="base/foot"></div>
<script src="static/lib/datatables/amazeui.datatables.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/user.js" type="text/javascript"  charset="utf-8"></script>
</body>

</html>